<%--
  Created by IntelliJ IDEA.
  User: 老大哥
  Date: 2022/6/11
  Time: 21:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" +request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <title>客户登记</title>
</head>
<body>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
<div>
    <button type="button" class="btn btn-outline-primary " data-toggle="modal"
            data-target="#addModal" style="cursor: pointer !important; float:left" onclick="addPetModal()">
        添加宠物主人
    </button>
</div>
<div style="padding: 15px;">
    <div class="panel-body">
        <table class="table table-hover">
            <thead>
            <tr>
                <td>编号</td>
                <td>所有人</td>
                <td>地址</td>
                <td>城市</td>
                <td>电话</td>
                <td>添加宠物</td>
            </tr>
            </thead>
            <tbody id="information">

            </tbody>
        </table>
    </div>
</div>

<!-- 添加宠物主人模态框（Modal） -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">宠物登记</h4>
            </div>
            <div class="modal-body">
                <%--模态框表单--%>
                <form class="layui-form" action="${pageContext.request.contextPath}/addOwner" id="form" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所有人名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required  lay-verify="required" placeholder="请输入所有人名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required  lay-verify="required" placeholder="请输入所有人地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-block">
                            <input type="text" name="city" required  lay-verify="required" placeholder="请输入所有人城市" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" required  lay-verify="required" placeholder="请输入所有人电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn layui-btn-primary">提交登记</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>

                </form>
                <script>
                    //Demo
                    layui.use('form', function(){
                        var form = layui.form;

                        //监听提交
                        form.on('submit(formDemo)', function(data){
                            layer.msg(JSON.stringify(data.field));
                            return false;
                        });
                    });
                </script>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<%--添加主人的宠物--%>
<div class="modal fade" id="addPetModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <h5 class="modal-title" id="add">添加宠物</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="${pageContext.request.contextPath}/addPet" method="post">
                    <input name="id" id="id" hidden>
                    <div class="form-group">
                        <label for="pName" class="col-form-label">宠物名</label>
                        <input type="text" autofocus class="form-control" id="pName" name="pName">
                    </div>
                    <div class="form-group">
                        <label for="birthDate" class="col-form-label">宠物诞辰</label>
                        <input type="datetime-local" autofocus class="form-control" id="birthDate" name="birthDate">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="submit">确认添加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {

        LoadOwnerData();
        var msg = "${msg}"
        console.log(msg)
        if (msg != "") {
            alert(msg)
        }
    })
    //ajax请求
    function LoadOwnerData() {
        $.ajax({
            url: $("#PageContext").val() + "/getOwner",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //清除旧的数据
                $("#information").html("");
                //添加新的数据
                $.each(data, function (i, n) {
                    $("#information").append("<tr>")
                        .append("<td>" + n.id + "</td>")
                        .append("<td>" + n.name + "</td>")
                        .append("<td>" + n.address + "</td>")
                        .append("<td>" + n.city + "</td>")
                        .append("<td>" + n.phone + "</td>")
                        .append("<td><button onclick='javascript:return addPetModal(" + n.id + ")' class='layui-btn layui-btn-sm layui-btn-primary'><i class='layui-icon layui-icon-heart-fill' style='font-size: 15px;'></i></button></td>")
                        .append("</tr>")
                });
            },
        })
    }
    function addPetModal(id) {
            $('#addPetModal').modal('show');
            $("#id").val(id);
            console.log($("#id").val())
    }

</script>
</html>
